<template>
	<div class="flow-row">
		<div class="flow-box">
			<div class="flow-item" :class="{ 'flow-item-active': isActive }" @click="!readable && open('flowNoticeSetting', node)">
				<div class="flow-node-box" :class="{ 'has-error': node.error }">
					<div class="node-name" :class="nameClass(node, 'node-tz')">
						<EditName v-model="state.name" />
						<SvgIcon name="ele-BellFilled" :size="20" style="margin-left: 10px" />
					</div>
					<div class="node-main"><span class="hint-title">设置此节点</span></div>
					<!-- 错误提示 -->
					<SvgIcon v-if="node.error" name="ele-WarningFilled" class="node-error" />
					<div v-if="!props.readable && !state.deletable" class="close-icon">
						<SvgIcon name="ele-CircleClose" @click.stop="state.deletable = true" />
					</div>
					<!-- 删除提示 -->
					<DeleteConfirm :node="node" v-model="state.deletable" />
				</div>
			</div>
			<FlowAddNode :node="node" :nodeType="5" :readable="readable" />
		</div>
		<FlowNoticeSetting ref="flowNoticeSetting" @close="isActive = false" />
	</div>
</template>
<script lang="ts" setup name="NoticeNode">
import FlowAddNode from '../add/index.vue';
import FlowNoticeSetting from '../../flowDrawer/notice/index.vue';
import EditName from '../../common/EditName.vue';
import DeleteConfirm from '../../common/DeleteConfirm.vue';
const props = defineProps({
	node: {
		type: Object,
		default: function () {
			return {};
		},
	},
	readable: {
		type: Boolean,
		default: false,
	},
});
const state = reactive({
	isActive: false,
	deletable: false,
	name: props.node.name,
});
watch(
	() => props.node,
	() => {
		state.isActive = false;
		state.deletable = false;
	},
	{
		deep: true,
	}
);
watch(
	() => state.name,
	(val: any) => {
		// 将对应的审批节点的添加按钮开启
		let currNode = props.node;
		$store.flow.UP_NODE({ currNode, field: 'name', value: val });
	},
	{
		deep: true,
	}
);
/**
 * 节点头部样式
 * @returns
 */
function nameClass(node, defaultStyle) {
	if (node.status == -1) {
		return defaultStyle;
	}
	return { 'node-status-not': node.status == 0, 'node-status-current': node.status == 1, 'node-status-complete': node.status == 2 };
}
</script>
